<template>
  <!-- 账户变动审核 -->
  <div>
    <!-- 头部区域 -->
    <div class="header">
      <!-- 批量删除按钮 -->
      <el-button
        size="mini"
        type="danger"
        @click="deletAllCommentData()"
        style="margin: 0px 6px; height: 28px"
        >批量删除</el-button
      >

      <!-- 申请人编号输入框 -->
      <el-input
        size="mini"
        style="width: 200px; height: 30px; margin: 0px 6px"
        placeholder="请输入关键字"
        v-model="inputKeyword"
        clearable
      >
      </el-input>

      <!-- 查询按钮 -->
      <el-button
        size="mini"
        type="primary"
        @click="queryAllCommentData()"
        style="margin: 0px 6px; height: 28px"
        >查询</el-button
      >
    </div>
    <!-- 表格区域 -->
    <div class="tableArea">
      <el-table
        ref="multipleTable"
        :data="CommentData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"> </el-table-column>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column label="评论内容">
          <template slot-scope="scope">
            <div v-html="scope.row.comment"></div>
          </template>
        </el-table-column>

        <el-table-column prop="userId" label="评论人编号"> </el-table-column>
        <el-table-column prop="articleId" label="资讯编号"> </el-table-column>
        <el-table-column
          prop="commentTime"
          :formatter="dateFormat"
          label="评论时间"
        >
        </el-table-column>
        <el-table-column label="评论状态">
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status === '审核通过'"
              type="success"
              size="mini"
              >通过</el-tag
            >
            <el-tag
              v-if="scope.row.status === '审核未通过'"
              type="danger"
              size="mini"
              >不通过</el-tag
            >
            <el-tag v-if="scope.row.status === '未审核'" type="info" size="mini"
              >未审核</el-tag
            >
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <div v-if="scope.row.status === '未审核'">
              <el-button
                type="text"
                size="small"
                @click="auditPass(scope.row.id)"
                >通过</el-button
              >
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="auditFail(scope.row.id)"
                >不通过</el-button
              >
            </div>

            <el-button
              v-else
              type="text"
              size="small"
              style=""
              @click="delFail(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 底部分页区域 -->
    <div class="pageSelect">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[2, 4, 6, 16]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      // 选中的行的数据
      multipleSelection: [],

      //当前页数
      currentPage: 1,

      // 页面大小
      pageSize: 6,

      // 总数
      total: 400,

      // 输入框输入关键字
      inputKeyword: "",

      // 咨询评论表格数据
      CommentData: [],
    };
  },
  computed: {},
  methods: {
    // 审核通过
    async auditPass(id) {
      await get("/comment/check", {
        id,
        status: "审核通过",
      });
      this.queryAllCommentData();
    },

    // 审核不通过
    async auditFail(id) {
      await get("/comment/check", {
        id,
        status: "审核未通过",
      });
      this.queryAllCommentData();
    },

    // 审核删除
    async delFail(id) {
      await get("/comment/deleteById", {
        id,
      });
      this.queryAllCommentData();
    },

    // 批量删除所有资讯评论数据
    async deletAllCommentData() {
      await post("/comment/batchDelete", {
        ids: this.multipleSelection,
      });
      this.queryAllCommentData();
    },

    // 批量选择资讯评论数据,选中的行赋值给选中资讯数组 CommentData
    handleSelectionChange(val) {
      let ids = [];
      val.forEach((item) => {
        ids.push(item.id);
      });
      this.multipleSelection = ids;
    },

    // 时间戳格式化
    dateFormat(row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    // 查询账户变动信息
    queryAllCommentData() {
      const queryData = {
        keywords: this.inputKeyword,
      };

      // 剔除没选择的项目
      for (const key in queryData) {
        if (!queryData[key]) {
          delete queryData[key];
        }
      }

      this.queryData = queryData;
      this.getAllCommentData();
      this.currentPage = 1;
    },

    // 获取账户变更信息
    async getAllCommentData() {
      const data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      const res = await get("/comment/pageQuery", {
        ...data,
        ...this.queryData,
      });
      this.CommentData = res.data.list;
      this.pageSize = res.data.pageSize;
      this.total = res.data.total;
    },

    // 监听页面大小改变
    handleSizeChange(val) {
      this.pageSize = val;
      this.getAllCommentData();
    },

    // 监听页数改变
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllCommentData();
    },
  },
  created() {
    // 获取账户变动信息
    this.getAllCommentData();
  },

  mounted() {},
};
</script>
<style scoped>
.header {
  display: flex;
  box-sizing: border-box;
  padding: 10px 0px 20px;
}

.tableArea {
  width: 100%;
}

.pageSelect {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
</style>